<template>
  <div>
    <Page auto-content-height>
      <!-- 表格 -->
      <Grid>
        <!-- 表格操作 -->
        <template #action>
          <el-button :icon="Edit" link type="primary" @click="EditHandle" />
          <el-button :icon="Delete" link type="danger" />
        </template>
        <!-- 使用 toolbar-buttons 插槽添加自定义按钮 -->
        <template #toolbar-buttons>
          <div style="font-size: 16px">
            {{ $t('sys.menu.menuList') }}
          </div>
          <el-button class="ml-auto" type="primary" @click="openhandle">
            {{ $t('sys.menu.addMenu') }}
          </el-button>
        </template>
      </Grid>
    </Page>
    <!-- 弹窗框 -->
    <Drawer class="w-[40%]" title="我是标题" />
  </div>
</template>

<script setup lang="tsx">
import type { MenuItem, RowType } from './type';

import type { VxeGridListeners } from '#/adapter/vxe-table';

import { Page, useVbenDrawer } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { Delete, Edit } from '@element-plus/icons-vue';
import { ElTag } from 'element-plus';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getMenuList } from '#/api/sys/menu';
import { useTable } from '#/hooks/usetable';
import { langHandle } from '#/utils/langhandle';

import ExtraDrawer from './components/drawer.vue';

// 弹窗连接
const [Drawer, drawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: ExtraDrawer,
});

// 获取表格数据
const getmenuListData = async () => {
  const res: any = await getMenuList(); // 调用实际的 API 获取数据
  // i18处理
  langHandle(res.data, 'menu');
  return {
    total: res.data.length,
    items: res.data,
  };
};

// 打开弹框
const openhandle = () => {
  drawerApi.open();
};

// 表格配置项
const { tableconfig } = useTable({
  columns: [
    {
      title: $t('sys.menu.menuName'),
      field: 'name',
      treeNode: true,
      minWidth: 120,
    },
    {
      title: $t('sys.menu.icon'),
      field: 'type',
      minWidth: 120,
    },
    {
      title: $t('sys.menu.serviceName'),
      field: 'path',
      minWidth: 120,
    },
    {
      title: $t('sys.menu.routePath'),
      field: 'component',
      minWidth: 120,
    },
    {
      title: $t('sys.menu.order'),
      field: 'sort',
      minWidth: 120,
    },
    // 状态
    {
      title: $t('sys.menu.status'),
      field: 'disabled',
      minWidth: 120,
      slots: {
        default: ({ row }: { row: MenuItem }) => {
          return (
            <ElTag type={row.disabled ? 'success' : 'info'}>
              {row.disabled ? $t('sys.menu.on') : $t('sys.menu.off')}
            </ElTag>
          );
        },
      },
    },
    // 隐藏
    {
      title: $t('sys.menu.isHidden'),
      field: 'hideMenu',
      minWidth: 120,
      slots: {
        default: ({ row }: { row: MenuItem }) => {
          return (
            <ElTag type={row.hideMenu ? 'success' : 'info'}>
              {row.hideMenu ? $t('sys.menu.isShown') : $t('sys.menu.isHidden')}
            </ElTag>
          );
        },
      },
    },
    // 创建时间
    {
      title: $t('sys.menu.createTime'),
      field: 'createTime',
      minWidth: 120,
      formatter: ['formatDate', 'yyyy-MM-dd'],
    },
    {
      title: $t('sys.menu.operation'),
      minWidth: 200,
      slots: { default: 'action' },
    },
  ],
  proxyConfig: {
    ajax: {
      query: async () => {
        return await getmenuListData();
      },
    },
  },
});

// 编辑事件
const EditHandle = () => {
  drawerApi.open();
};

// 表格事件
const gridEvents: VxeGridListeners<RowType> = {};

// 表格实例
const [Grid] = useVbenVxeGrid({
  gridEvents,
  gridOptions: tableconfig.value, // 强化树形配置
});
</script>
